<template>
  <div class="echart" id="user"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    randomRiseInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    randomRiseInfo(val) {
      if (val) {
        let myData = [
          Number(val.one * 12),
          Number(val.two * 10),
          Number(val.three * 8),
          Number(val.four * 6),
          Number(val.five * 2),
          Number(val.six),
          Number(val.seven)
        ];
        debugger;
        var chartDom = document.getElementById("user");
        var myChart = echarts.init(chartDom);
        var option = {
          title: {
            text: "用户注册时间分布图",
            subtext: "随机数据",
            left: "center"
          },
          xAxis: {
            data: [
              "近七天",
              "近三十天",
              "上个月",
              "本季度",
              "上季度",
              "本年数据",
              "上年数据"
            ],
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },

          yAxis: {
            type: "value"
          },
          series: [
            {
              data: myData,
              type: "line",
              smooth: true
            }
          ]
        };
        option && myChart.setOption(option);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 480px;
  background: #fff;
  margin: 20px 0;
  padding: 20px 0;
}
</style>
